<template>
  <!--  clearable添加清空按钮-->
  <div>
    <h3>禁用选项、移除选项</h3>
    <el-select v-model="value" clearable placeholder="请选择" @change="change">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled">
      </el-option>
    </el-select>
    <el-collapse style="margin-top: 5px;">
      <el-collapse-item title="查看代码">
       <pre>
        <code>
          <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">el-select</span> <span
              class="hljs-attr">v-model</span>=<span
              class="hljs-string">"value"</span> <span class="hljs-attr">clearable placeholder</span>=<span
              class="hljs-string">"请选择"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">el-option</span>
                <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in options"</span>
                <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.value"</span>
                <span class="hljs-attr">:label</span>=<span class="hljs-string">"item.label"</span>
                <span class="hljs-attr">:value</span>=<span class="hljs-string">"item.value"</span>&gt;</span>
              <span class="hljs-tag">&lt;/<span class="hljs-name">el-option</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">el-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

          <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
            <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
              data() {
                <span class="hljs-keyword">return</span> {
                  <span class="hljs-attr">options</span>: [{
                    <span class="hljs-attr">value</span>: <span class="hljs-string">'选项1'</span>,
                    <span class="hljs-attr">label</span>: <span class="hljs-string">'黄金糕'</span>
                  }, {
                    <span class="hljs-attr">value</span>: <span class="hljs-string">'选项2'</span>,
                    <span class="hljs-attr">label</span>: <span class="hljs-string">'双皮奶'</span>,
                    <span class="hljs-attr">disabled</span>: <span class="hljs-string">true</span>
                  }, {
                    <span class="hljs-attr">value</span>: <span class="hljs-string">'选项3'</span>,
                    <span class="hljs-attr">label</span>: <span class="hljs-string">'蚵仔煎'</span>
                  }, {
                    <span class="hljs-attr">value</span>: <span class="hljs-string">'选项4'</span>,
                    <span class="hljs-attr">label</span>: <span class="hljs-string">'龙须面'</span>
                  }, {
                    <span class="hljs-attr">value</span>: <span class="hljs-string">'选项5'</span>,
                    <span class="hljs-attr">label</span>: <span class="hljs-string">'北京烤鸭'</span>
                  }],
                  <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
                }
              }
            }
          </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
        </code>
      </pre>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        operation: {
          abc: {}
        },
        items: []
      }
    },
    watch: {
      value: function (nv, ov) {
        console.log('value changed:old=' + ov + ',new=' + nv
        )
        this.items.push(nv);
        this.operation.abc = nv;
      },
      items: function (nv, ov) {
        console.log('arr change:' + nv)
        console.log('arr change:' + ov)
      },
      operation: {
        handler: function (nv, ov) {
          console.log(arguments)
        },
        deep: true, immediate: true
      }
    },
    methods: {
      change: function (item) {
        console.log(this.value)
      }
    }
  }
</script>
